<template>
    <div class="box1 bordert">
        <div class="ttitle">修改密码</div>
        <div class="lists">
            <div class="tishi"><span v-show="isShowt">提示：{{ tishiyu }}</span></div>
            <div class="input">
                <div class="phone">手机号：</div>
                <input class="int" type="text" v-model="xgmmlist.mobile">
            </div>
            <!-- <div>手机号码格式错误</div> -->
            <!-- <div class="input" style="margin-top:20px;">
                <div class="phone">验证码：</div>
                <input class="int" style="width:300px;" type="text" v-model="xgmmlist.yzm">
                <span class="yzm1"><button class="yzmb1">获取验证码</button></span>
            </div> -->
            <div class="input" style="margin-top:20px;">
                <div class="phone">原密码：</div>
                <input class="int" type="password" v-model="xgmmlist.password">
            </div>
            <div class="input" style="margin-top:20px;">
                <div class="phone">新密码：</div>
                <input class="int" type="password" v-model="xgmmlist.xpassword">
            </div>
            <div class="input" style="margin-top:20px;">
                <div class="phone">新密码：</div>
                <input class="int" type="password" v-model="xgmmlist.xmm">
            </div>
            <div class="yyes">
                <button class="yes pointer" @click="querenxg">确认</button>
            </div>
        </div>
        <div style="height:400px"></div>
    </div>
</template>
<script>
export default {
  data () {
    return {
        xgmmlist: {
            mobile: '',
            password: '',
            xpassword: '',
            xmm:''
        },
        tishiyu:'',
        isShowt:false
    }
  },
  methods: {
      async querenxg() {
          console.log(this.xgmmlist)
        if(this.xgmmlist.xpassword !== this.xgmmlist.xmm) {
            this.isShowt = true
            this.tishiyu = '两次密码输入不一致'
            var _that = this
            setTimeout(function(){
                _that.isShowt = false
            },1500)
        }else {
        var xg = new FormData()
        xg.set('mobile',this.xgmmlist.mobile)
        xg.set('password',this.xgmmlist.password)
        xg.set('xpassword',this.xgmmlist.xpassword)
        const { data: res } = await this.$http.post('app/user/updateAPassword.do',xg)
        console.log(res)
        if (res.code !== 0){
            this.isShowt = true
            this.tishiyu = res.msg
            var that = this
            setTimeout(function(){
                that.isShowt = false
            },1500)
        }else {
            window.localStorage.clear()
            this.$router.push({
        name:'home',
        query: {
          xianshi: true,
          sutankuang: true,
          msg:'修改成功，请重新登录'
        }
      })
            console.log('请重新登录')
        }
        }
    }
  }
  }
</script>
<style lang="less" scoped>
@import "../../assets/css/index.css";
    .box1 {
        background-color: #fff;
        .lists {
            // position: relative;
            // padding: 20px;
            width: 95%;
            margin: 20px auto;
            height: 400px;
            padding-top: 80px;
            background-color: #FAFAFA;
            .input {
                position: relative;
                margin: 0 auto;
                width: 500px;
                height: 40px;
                border: 1px solid #D7D7D7;
                .phone {
                    position: absolute;
                    line-height: 40px;
                    left: 20px;
                }
                .int {
                    position: absolute;
                    background-color:#FAFAFA;
                    left: 90px;
                    width: 400px;
                    height: 38px;
                    border: 0;
                    outline: none;
                }
                .yzm1 {
                    position: absolute;
                    line-height: 40px;
                    right: 20px;
                    .yzmb1 {
                        height: 35px;
                        border: 0;
                        background-color:#FAFAFA;
                    }
                }
            }
            .yyes {
                width: 200px;
                height: 50px;
                margin: 40px auto;
                text-align:center;
                .yes {
                    height: 40px;
                    width: 80px;
                    background-color: #FF8B19;
                    color: #fff;
                    border: 0;
                    
                }
            }
        }
    }
    .tishi {
        position: relative;
        margin: 0 auto;
        height: 40px;
        width: 200px;
        color: red;
    }
    // button:focus{outline: 0;}

</style>